<template>
  <div o-Container style="padding: 1.2rem;box-sizing: border-box;height: 100vh;padding-bottom: 0;">
    <div class="content_box">
      <div class="content_left_box">
        <div class="top_box">
          <div class="search_box">
            <img src="/static/skin/herodoo/main/platform/home/img/search.png" alt="" />
            <input v-model="searchValue" type="text" placeholder="请输入搜索内容" @keydown.enter="searchEnterKeyPress"
              @blur="searchEnterKeyPress" />
            <img @click="fdrawerOp()" src="/static/skin/herodoo/main/platform/home/img/shaixuan.png" alt="" />
          </div>
        </div>
        <div class="bottom_box">
          <div class="bottom_box_list" v-for="item in rightsList" :key="item.ID" @click="goDetaiks(item)">
            <div class="is_no_Quantity" v-if="item.InventoryQuantity == 0">已售罄</div>
            <div class="is_enable" v-if="item.TypeID == '权益礼包'">
              {{ item.TypeID }}
            </div>
            <div class="list_top">
              <div class="list_top_img">
                <img class="center-image" :src="JSON.parse(item.MainPicturePath)[0].url" alt="" />
              </div>
              <div class="list_top_text">
                <div>
                  <el-tooltip class="item" effect="dark" :content="item.Name" placement="top-start">
                    <div class="text">
                      <span class="mast_go" v-if="item.TypeID == 2">权益包</span>
                      {{ item.Name }}
                    </div>
                  </el-tooltip>
                  <div>
                    <span class="label" v-for="(ele, index) in item.EquityFlagListName.split(',')" :key="index">{{ ele
                      }}</span>
                  </div>
                </div>
                <div class="price">
                  <div class="now-price">
                    ￥
                    <div>{{ item.CostPrice }}</div>
                  </div>
                  <div class="old-price">
                    ￥
                    <div>{{ item.SalePrice }}</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="list_bottom">
              <span>库存：{{ item.InventoryQuantity }} 份</span>
              <span>已售：{{ item.SoldQuantity ? item.SoldQuantity : 0 }} 份</span>
            </div>
          </div>
        </div>
        <!-- 分页 -->
        <Pagination :pageData="rightPageData.pageData" @jump="jump"></Pagination>
      </div>
      <!-- 推荐权益 -->
      <Combination></Combination>
    </div>
    <!-- 权益筛选弹窗 -->
    <screenRights @searchFun="search" ref="screenRights"></screenRights>
  </div>
</template>

<script>
import Pagination from "../Components/pagination.vue";
// import BatchRelease from '../../Components/BatchRelease.vue'
import Combination from "../BenefitsDetailsComponents/combination.vue";
import screenRights from "../Components/screenRights.vue";
export default {
  name:
    "shopping_centre" /* 这个name暂时不知道用啥用，根据官方文档说的是方便排错的 */,
  components: {
    Pagination,
    screenRights,
    Combination
  },
  data() {
    return {
      octopus: this.$parent.octopus,
      rightsList: [],
      likeList: [],
      rightPageData: "",
      // 筛选内容
      searchValue: "",
      // 权益标签
      labelID: [],
      // 权益类型
      typeID: [],
      // 价格
      priceArr: "",
      // 公司限制
      company: [],
      // 时间
      dateData: null,
      likePage: 1
    };
  },
  created() {
    this.getList(1);
  },
  activated() {
    this.getLikeList(1);
  },
  methods: {
    // 分页切换
    jump(e) {
      this.getList(e);
    },
    // 模糊查询
    searchEnterKeyPress() {
      this.getList(1);
    },
    // 精细化查询
    search(labelID, typeID, priceArr, company, dateData) {
      this.labelID = labelID;
      this.typeID = typeID;
      this.priceArr = priceArr;
      this.company = company;
      this.dateData = dateData;
      this.getList(1);
    },
    // 权益列表
    getList(e) {
      let o = this;
      this.octopus.request.api.post(
        "/Octopus/Engine/List",
        {
          id: 1403,
          cellData: [
            { name: "CompanyID" }, // 公司ID
            { name: "Company" }, // Company
            { name: "ContractID" }, // 合同编号
            {
              name: "CostPrice",
              filterKey: "BETWEEN",
              filterValue: this.priceArr
            }, // 平台价格
            { name: "CreateTime" }, // 权益创建时间
            { name: "CreateUserID" }, // 权益创建人
            {
              name: "EquityFlagList",
              filterKey: "LIKE",
              filterValue: this.labelID.join()
            }, // 权益标签
            { name: "EquityFlagListName" }, // 权益标签中文
            { name: "ID" }, // 权益ID
            { name: "InventoryQuantity" }, // 库存数量
            { name: "MainPicturePath" }, // 主图
            { name: "Name", filterKey: "LIKE", filterValue: this.searchValue }, // 权益名称/标题
            { name: "ProductFlagList" }, // 产品标签
            {
              name: "ProductFlagListName",
              filterKey: "IN",
              filterValue: this.typeID
            }, // 产品标签中文
            { name: "SalePrice" }, // 市场价格
            { name: "SecondaryPicturePath" }, // 副图
            { name: "SoldQuantity" }, // 已售数量
            {
              name: "TransferRuleID",
              filterKey: "LIKE",
              filterValue: this.company.join()
            }, // 采购公司限制
            { name: "TransferRuleIDName" }, // 采购公司限制 中文
            { name: "TypeID" }, // 权益类型（1 精品权益 2组合权益）
            { name: "UpdateTime" }, // UpdateTime
            { name: "VerifiedQuantity" }, // 已核销数量
            { name: "EffectiveTime" }, // 过期时间
            { name: "ExpireTime" } // 过期时间
          ],
          paramData: {
            Status: "7,8",
            CompanyID: "NULL",
            TypeID: "1,2",
            FlagList: "NULL",
            StartTime: o.dateData ? `${o.dateData[0]} 00:00:00` : "NULL",
            EndTime: o.dateData ? `${o.dateData[1]} 00:00:00` : "NULL"
          },
          pageData: {
            rowSize: 16,
            index: e
          }
        },
        function (data) {
          if (data.status.code == 200) {
            // if (o.dateData.length) {
            //   o.rightsList = data.content.queryData.filter(
            //     item =>
            //       (item.EffectiveTime >= o.dateData[0] &&
            //         item.ExpireTime <= o.dateData[1]) ||
            //       (item.EffectiveTime <= o.dateData[0] &&
            //         item.ExpireTime >= o.dateData[1])
            //   );
            // } else {

            // }
            o.rightsList = data.content.queryData;
            o.rightPageData = data.content;
            o.rightPageData.pageData.listData.forEach(page => {
              if (page.type == "Home") {
                page.index;
                page.class = "el-icon-arrow-left";
              } else if (page.type == "Previous") {
                page.class = "el-icon-caret-left";
              } else if (page.type == "Next") {
                page.class = "el-icon-caret-right";
              } else if (page.type == "End") {
                page.class = "el-icon-arrow-right";
              } else {
                page.text = page.index;
              }
            });
          } else {
            o.octopus.tips.error(data);
          }
        }
      );
    },
    // 换一换
    refresh() {
      this.getLikeList(this.likePage);
    },
    // 热门推荐
    getLikeList(e) {
      // let arr = []
      // this.likeList = []
      // while(arr.length < 3) {
      //     let ran = parseInt(Math.random()*this.rightsList.length)
      //     let index = arr.findIndex(item => item == index)
      //     index == -1 && arr.push(ran)
      // }
      // arr.map(item => {
      //     this.likeList.push(this.rightsList[item])
      //     console.log(this.rightsList[item]);
      // })
      this.octopus.request.api.post(
        "/Octopus/Engine/List",
        {
          id: 731,
          cellData: [
            { name: "CompanyID" }, // 权益所属公司
            { name: "CostPrice" }, // 平台价格
            { name: "FlagList" }, // 权益标签
            { name: "FlagListName" }, // 权益标签 中文
            { name: "ID" }, // 权益的ID
            { name: "InventoryQuantity" }, // 库存
            { name: "MainPicturePath" }, // 主图
            { name: "Name" }, // 权益名称（标题）
            { name: "SalePrice" }, // 市场价格
            { name: "SecondaryPicturePath" }, // 副图
            { name: "SoldQuantity" } // 已售数量
          ],
          pageData: {
            rowSize: 3,
            index: e
          }
        },
        data => {
          if (data.status.code == 200) {
            this.likePage += 1;
            if (this.likePage > data.content.pageData.totalPages - 1) {
              this.likePage = 1;
            }
            this.likeList = data.content.queryData;
          } else {
            this.octopus.tips.error(data);
          }
        }
      );
    },
    fdrawerOp() {
      this.$refs.screenRights.drawerOp();
    },
    goDetaiks(item) {
      let str = item.TypeID == 2 ? "ZH" : "DG";
      this.octopus.router.jump(
        `/MMS/AIGC/RightsDetails/List?rightsType=SC&type=${str}&rightsId=${item.ID
        }&CompanyID=${item.Company}`
      );
    }
  }
};
</script>
<style scoped>
@import "../../../../../static/skin/default/MMS/AIGC/EquityRepositories/PublicLibrary/css/base.css";

.content_left_box .bottom_box .bottom_box_list .list_top .list_top_text {
  height: 12rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.content_left_box .bottom_box .bottom_box_list .list_top .list_top_text .label {
  display: inline-block;
  margin-bottom: 0.5rem;
  border: 1px solid #336df1;
  color: #336df1;
}

.bottom_box_list {
  position: relative;
}

.price {
  display: flex;
  align-items: end;
}

.price .now-price,
.price .old-price {
  display: flex;
  align-items: end;
  margin-right: 0.9rem;
}

.price .now-price div {
  font-size: 3rem;
  line-height: 3rem;
  font-weight: bold;
}

.price .old-price {
  font-size: 1.4rem;
  color: rgba(201, 201, 201, 1);
}

.content_left_box .bottom_box .bottom_box_list .list_top .list_top_img {
  width: 12rem;
  height: 12rem;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 1rem;
  flex-flow: 0;
  flex-shrink: 0;
}

.center-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.content_left_box .bottom_box .bottom_box_list .list_bottom {
  color: rgba(130, 112, 112, 1);
  font-size: 1rem;
}

.list_bottom>span:first-child {
  margin-right: 2.6rem;
}

.is_no_Quantity {
  position: absolute;
  top: 0;
  left: 0;
  background: #c4a888;
  color: #fff;
  border-radius: 2.5rem 0rem 2.5rem 0rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
}
</style>
